<template>
  <h1>当前求和为：{{ sum }}</h1>
  <button @click="sum++">点我加1</button>
  <hr />
  <h1>当前信息为：{{ msg }}</h1>
  <button @click="msg += '!'">增加感叹号</button>
  <hr />
  <h1>姓名：{{ person.name }}</h1>
  <h1>年龄：{{ person.age }}</h1>
  <h1>薪资：{{ person.job.j1.salary }}w</h1>
  <button @click="person.name += '~'">增加波浪线</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">加薪</button>
</template>

<script>
import { ref, reactive, watch, watchEffect } from "vue";

export default {
  name: "Demo",
  setup() {
    //定义数据
    let sum = ref(0);
    let msg = ref("你好啊");
    const person = reactive({
      name: "李文泰",
      age: 20,
      job: {
        j1: {
          salary: "20",
        },
      },
    });

    // //监视
    // watch(
    //   sum,
    //   (newValue, oldValue) => {
    //     console.log("sum的值变化啦", newValue, oldValue);
    //   },
    //   { immediate: true }
    // );

    //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
    watchEffect(() => {
      const x1 = sum.value;
      const x2 = person.job.j1.salary;

      console.log("watchEffect的回调执行了");
    });

    //返回对象
    return {
      sum,
      msg,
      person,
    };
  },
};
</script>

<style>
</style>
